<template>
	<div class="content-outside">
		<div class="content">
			<h4>作品登记申请表
				<span>系统将自动保存填写的信息，可在个人中心下进行修改和删除</span>
			</h4>
			<div class="step_state">
				<div class="step step_01 clear current">
					<div class="step_info">
						<span>1</span>
						<span>作品信息</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_02 clear">
					<div class="step_border"></div>
					<div class="step_info">
						<span>2</span>
						<span>权利状况</span>
						<span>说明</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_03 clear">
					<div class="step_border"></div>
					<div class="step_info">
						<span>3</span>
						<span>留存样本</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_04 clear">
					<div class="step_border"></div>
					<div class="step_info">
						<span>4</span>
						<span>申请人信息</span>
					</div>
				</div>
			</div>
			<div class="hr">
				<p>作品信息</p>
			</div>
			<div class="form_box">
				<el-form :model="degree_01" :rules="degree_01_rules" ref="degree_01" label-width="150px" class="demo-ruleForm">
					<div class="form_width">
						<h3 class="h3">作品信息</h3>
						<el-form-item label="作品名称" prop="product_name">
							<el-input v-model="degree_01.product_name"></el-input>
						</el-form-item>

						<el-form-item label="作品类型" prop="product_type">
							<el-radio-group v-model="degree_01.product_type">
								<el-radio v-for="item in product_type" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="创作说明" prop="product_desc">
							<el-input type="textarea" v-model="degree_01.product_desc"></el-input>
						</el-form-item>

						<h3 class="h3">作品作者信息</h3>
						<el-form-item label="作者信息">
							<el-button type="primary" size="small" @click="handleAddAuthor">添加作者</el-button>
							<div class="tablepadding">
								<el-table class="clearline" :data="authorList" style="width: 100%; margin-top: 10px;">
									<el-table-column prop="author_name" label="姓名/名称"></el-table-column>
									<el-table-column prop="author_signature" label="作者署名"></el-table-column>
									<el-table-column prop="author_id_card" label="附件"></el-table-column>
									<el-table-column label="操作" width="100">
										<template slot-scope="scope">
											<el-button-group>
												<el-button size="small" @click="handleEditAuthor(scope.$index, scope.row)"></el-button>
												<el-button size="small" type="danger" @click="authordelFn(scope.$index, scope.row)"></el-button>
											</el-button-group>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</el-form-item>

						<el-form-item label="作品创作性质" prop="creation_nature">
							<el-radio-group v-model="degree_01.creation_nature">
								<el-radio v-for="item in creation_nature" :label="item.value" :key="item.label">{{ item.label }}
								</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="创作说明" prop="creation_desc">
							<el-input type="textarea" v-model="degree_01.creation_desc"></el-input>
						</el-form-item>

						<el-form-item label="创作完成地点" prop="finish_region">
							<el-row class="address">
								<el-col :span="5">
									<el-form-item>
										<el-select v-model="degree_01.finish_region" placeholder="请输入省" @change="finish_regionChange">
											<el-option v-for="item in regions" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5" style="padding-left: 10px;">
									<el-form-item prop="publish_city">
										<el-select v-model="degree_01.finish_city" placeholder="请输入市">
											<el-option v-for="item in finish_citys" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<!-- <el-form-item prop="detail">
                                          <el-input placeholder="请填写详细地址" :number="true" v-model="form.detail">
                                          </el-input>
                                      </el-form-item> -->
								</el-col>
							</el-row>
							<!-- <el-cascader :options="options" change-on-select></el-cascader> -->
						</el-form-item>

						<el-form-item label="创作完成日期" prop="finish_date">
							<el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="degree_01.finish_date"></el-date-picker>
						</el-form-item>

						<el-form-item label="发表状态" prop="publish_status">
							<el-radio-group v-model="degree_01.publish_status">
								<el-radio v-for="item in publish_status" :label="item.value" :key="item.label">{{ item.label }}
								</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="首次发表地点" prop="publish_region">
							<el-row class="address">
								<el-col :span="5">
									<el-form-item>
										<el-select v-model="degree_01.publish_region" placeholder="请输入省" @change="publish_regionChange">
											<el-option v-for="item in regions" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5" style="padding-left: 10px;">
									<el-form-item prop="publish_city">
										<el-select v-model="degree_01.publish_city" placeholder="请输入市">
											<el-option v-for="item in publish_citys" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<!-- <el-form-item prop="detail">
                                          <el-input placeholder="请填写详细地址" :number="true" v-model="form.detail">
                                          </el-input>
                                      </el-form-item> -->
								</el-col>
							</el-row>
							<!-- <el-cascader :options="options" change-on-select></el-cascader> -->
						</el-form-item>

						<el-form-item label="首次发表日期" prop="publish_date">
							<el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="degree_01.publish_date"></el-date-picker>
						</el-form-item>
						<h3 class="h3">著作权人
							<!-- <el-button type="primary" size="small" style="margin-left: 15px;" @click="handleAddOwner" >添加著作权人</el-button> -->
						</h3>

						<el-form-item label="著作权人信息">
							<el-button type="primary" size="small" @click="handleAddOwner">添加著作权人</el-button>
							<div class="tablepadding">
								<el-table class="clearline" :data="ownerList" style="width: 100%; margin-top: 10px;">
									<el-table-column prop="owner_name" label="姓名/名称"></el-table-column>
									<el-table-column prop="owner_type" label="类别"></el-table-column>
									<el-table-column prop="id_type" label="证件类型"></el-table-column>
									<el-table-column prop="id_number" label="证件号码"></el-table-column>
									<!-- <el-table-column prop="country" label="国籍"> </el-table-column> -->
									<el-table-column prop="region" label="省份"></el-table-column>
									<el-table-column prop="city" label="城市"></el-table-column>
									<el-table-column prop="owner_signature" label="署名"></el-table-column>
									<el-table-column prop="id_pic" label="附件"></el-table-column>
									<el-table-column label="操作" width="100">
										<template slot-scope="scope">
											<el-button-group>
												<el-button size="small" @click="handleEditOwner(scope.$index, scope.row)"></el-button>
												<el-button size="small" type="danger" @click="ownerdelFn(scope.$index, scope.row)"></el-button>
											</el-button-group>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</el-form-item>
						<h3 class="h3">作品说明书</h3>
						<el-form-item label="上传附件" prop="creation_pic">
							<div>
								<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.zuopinshuomingshu" :on-success="sowSuccess" :before-upload="sowUpload" :limit="1" :on-exceed="sowExceed" :file-list="fileList.sow">
									<el-button size="small" type="primary">上传作品说明书</el-button>
									<span slot="tip" class="el-upload__tip">（请从创作目的、创作过程、作品独创性三方面写，并附申请人签章，标明签章日期）</span>
								</el-upload>
							</div>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<div class="form_next">
				<el-button type="primary" @click="updateinfoFn">下一步</el-button>
			</div>
			<!--添加作者界面-->
			<el-dialog title="添加作者" :visible.sync="addAuthorVisible">
				<el-form :model="addAuthor" label-width="100px" :rules="addAuthorRules" ref="addAuthor">
					<el-form-item label="姓名/名称" prop="author_name">
						<!--<template slot-scope="scope"> <i style="color: red;">*</i><span>姓名/名称</span></template>-->
						<el-input v-model="addAuthor.author_name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者署名">
						<el-input v-model="addAuthor.author_signature" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者身份证" prop="author_id_card">
						<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.author" :on-success="authorSuccess" :before-upload="authorUpload" :limit="1" :on-exceed="authorExceed" :file-list="fileList.author">
							<el-button size="small" type="primary">点击上传</el-button>
							<span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addAuthorVisible = false">取消</el-button>
					<el-button type="primary" @click.native="addAuthorFn" :loading="addAuthorLoading">保存</el-button>
				</div>
			</el-dialog>

			<!--编辑作者界面-->
			<el-dialog title="编辑" :visible.sync="editAuthorVisible">
				<el-form :model="editAuthor" label-width="100px" :rules="editAuthorRules" ref="editAuthor">
					<el-form-item label="姓名" prop="author_name">
						<el-input v-model="editAuthor.author_name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者署名" prop="signature">
						<el-input v-model="editAuthor.author_signature" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者身份证" prop="author_id_card">
						<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.author" :on-success="authorSuccess" :before-upload="authorUpload" :limit="1" :on-exceed="authorExceed" :file-list="fileList.author">
							<el-button size="small" type="primary">点击上传</el-button>
							<span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editAuthorVisible = false">取消</el-button>
					<el-button type="primary" @click.native="authorupFn" :loading="editAuthorLoading">提交</el-button>
				</div>
			</el-dialog>

			<!--添加著作权人界面-->
			<el-dialog title="添加著作权人" :visible.sync="addOwnerVisible">
				<el-form :model="addOwner" label-width="100px" :rules="addOwnerRules" ref="addOwner">
					<el-form-item label="姓名/名称" prop="owner_name">
						<el-input v-model="addOwner.owner_name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者署名" prop="owner_signature">
						<el-input v-model="addOwner.owner_signature" auto-complete="off"></el-input>
					</el-form-item>

					<el-form-item label="类别" prop="owner_type">
						<el-select v-model="addOwner.owner_type" placeholder="请选择">
							<el-option v-for="item in owner_type" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件类型" prop="id_type">
						<el-select v-model="addOwner.id_type" placeholder="请选择">
							<el-option v-for="item in id_type" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" prop="id_number">
						<el-input v-model="addOwner.id_number" auto-complete="off"></el-input>
					</el-form-item>
					<!-- <el-form-item label="国家">
                          <el-select v-model="addOwner.country" placeholder="请选择">
                              <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                              </el-option>
                          </el-select>
                      </el-form-item> -->

					<el-form-item label="省份" prop="region">
						<el-select v-model="addOwner.region" placeholder="请选择" @change="owner_regionChange">
							<el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="城市" prop="city">
						<el-select v-model="addOwner.city" placeholder="请选择">
							<el-option v-for="item in owner_citys" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="上传身份证" prop="id_pic">
						<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.zhuzuoquanren" :on-success="ownerSuccess" :before-upload="ownerUpload" :limit="1" :on-exceed="ownerExceed" :file-list="fileList.owner">
							<el-button size="small" type="primary">点击上传</el-button>
							<span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addOwnerVisible = false">取消</el-button>
					<el-button type="primary" @click.native="addownerFn" :loading="addOwnerLoading">保存</el-button>
				</div>
			</el-dialog>
			<!--编辑著作权人界面-->
			<el-dialog title="编辑" :visible.sync="editOwnerVisible">
				<el-form :model="editOwner" label-width="100px" :rules="editOwnerRules" ref="editOwner">
					<el-form-item label="姓名/名称" prop="owner_name">
						<el-input v-model="editOwner.owner_name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="作者署名" prop="owner_signature">
						<el-input v-model="editOwner.owner_signature" auto-complete="off"></el-input>
					</el-form-item>

					<el-form-item label="类别" prop="owner_type">
						<el-select v-model="editOwner.owner_type" placeholder="请选择">
							<el-option v-for="item in owner_type" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件类型" prop="id_type">
						<el-select v-model="editOwner.id_type" placeholder="请选择">
							<el-option v-for="item in id_type" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" prop="id_number">
						<el-input v-model="editOwner.id_number" auto-complete="off"></el-input>
					</el-form-item>

					<!-- <el-form-item label="国家">
                          <el-select v-model="addOwner.country" placeholder="请选择">
                              <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                              </el-option>
                          </el-select>
                      </el-form-item> -->

					<el-form-item label="省份" prop="region">
						<el-select v-model="editOwner.region" placeholder="请选择" @change="owner_regionChange">
							<el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="城市" prop="city">
						<el-select v-model="editOwner.city" placeholder="请选择">
							<el-option v-for="item in owner_citys" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="上传身份证" prop="id_pic">
						<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.zhuzuoquanren" :on-success="ownerSuccess" :before-upload="ownerUpload" :limit="1" :on-exceed="ownerExceed" :file-list="fileList.owner">
							<el-button size="small" type="primary">点击上传</el-button>
							<span slot="tip" class="el-upload__tip">（请上传 jpg/png/gif/bmp 格式图片，小于2M）</span>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editOwnerVisible = false">取消</el-button>
					<el-button type="primary" @click.native="ownerupFn" :loading="editOwnerLoading">提交</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import addressData from "@/assets/js/addressData.js"; // 地址
import util from "@/assets/js/util.js"; // 时间格式化
import { mapState, mapMutations } from 'vuex'
import {
    getStreamnum,
    addAuthor,
    authorlist,
    authordel,
    authorup,
    addowner,
    ownerlist,
    ownerdel,
    ownerup,
    autosubmit,
    submitfile,
    look
} from "@/api";

function formatData(data) {
    var result = [];
    for (var key in data) {
        result.push({
            value: key
        });
    }
    return result;
}

export default {
    data() {
        return {
            copyright_number: null, // 流水号
            // 上传地址
            uploadUrl: submitfile,
            imageUrl: "",
            fileInfo: {
                author: {
                    type: "pic",
                    folder: "author"
                },
                zhuzuoquanren: {
                    type: "pic",
                    folder: "zhuzuoquanren"
                },
                zuopinshuomingshu: {
                    type: "file",
                    folder: "zuopinshuomingshu"
                }
            },
            fileList: {
                author: [], // 作者身份证文件
                ower: [], // 著作权人身份证文件
                sow: [] // 说明书文件
            },

            //新增作者界面
            addAuthorVisible: false,
            addAuthor: {
                author_name: "",
                author_signature: "",
                author_id_card: ""
            },
            addAuthorLoading: false,
            addAuthorRules: {
                author_name: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                author_id_card: [
                    { required: true, message: "这是必填项或必选项" }
                ]
            },
            //编辑作者界面
            editAuthorVisible: false,
            editAuthor: {
                author_name: "",
                author_signature: "",
                author_id_card: ""
            },
            editAuthorLoading: false,
            editAuthorRules: {
                author_name: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                author_id_card: [
                    { required: true, message: "这是必填项或必选项" }
                ]
            },

            //作者列表
            authorList: [],

            //新增著作权人界面
            addOwnerVisible: false,
            addOwner: {
                owner_name: "",
                owner_type: "", //类别
                id_type: "",
                id_number: "",
                // country: '',
                region: "",
                city: "",
                owner_signature: "", //署名
                id_pic: "" //身份证路径
            },
            addOwnerLoading: false,
            addOwnerRules: {
                owner_name: [{ required: true, message: "这是必填项或必选项" }],
                owner_type: [{ required: true, message: "这是必填项或必选项" }],
                id_type: [{ required: true, message: "这是必填项或必选项" }],
                id_number: [{ required: true, message: "这是必填项或必选项" }],
                region: [{ required: true, message: "这是必填项或必选项" }],
                city: [{ required: true, message: "这是必填项或必选项" }],
                id_pic: [{ required: true, message: "这是必填项或必选项" }]
            },
            //编辑著作权人界面
            editOwnerVisible: false,
            editOwner: {
                owner_name: "",
                owner_type: "", //类别
                id_type: "",
                id_number: "",
                // country: '',
                region: "",
                city: "",
                owner_signature: "", //署名
                id_pic: "" //身份证路径
            },
            editOwnerLoading: false,
            editOwnerRules: {
                owner_name: [{ required: true, message: "这是必填项或必选项" }],
                owner_type: [{ required: true, message: "这是必填项或必选项" }],
                id_type: [{ required: true, message: "这是必填项或必选项" }],
                id_number: [{ required: true, message: "这是必填项或必选项" }],
                region: [{ required: true, message: "这是必填项或必选项" }],
                city: [{ required: true, message: "这是必填项或必选项" }],
                id_pic: [{ required: true, message: "这是必填项或必选项" }]
            },
            //著作权人列表
            ownerList: [],

            degree: 1, // 第几步
            regions: formatData(addressData), // 省份

            degree_01: {
                product_name: "", // 作品名称
                product_type: "", // 作品类型
                product_desc: "", // 作品描述
                creation_nature: "", // 创作性质
                creation_desc: "", // 创作说明
                finish_region: "", // 完成省份
                finish_city: "", // 完成城市
                finish_date: "", // 完成时间
                publish_status: "", // 发表状态
                publish_date: "", // 发表时间
                publish_region: "", // 发表省份
                publish_city: "", // 发表城市
                creation_pic: "" // 作品说明书
            },

            degree_01_rules: {
                product_name: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                finish_date: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                finish_region: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                publish_region: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                publish_date: [
                    { required: true, message: "这是必填项或必选项" }
                ],
                creation_pic: [
                    { required: true, message: "这是必填项或必选项" }
                ]
            },

            // 作品类型选项
            product_type: [
                {
                    value: 1,
                    label: "文字"
                },
                {
                    value: 2,
                    label: "口述"
                },
                {
                    value: 3,
                    label: "音乐"
                },
                {
                    value: 4,
                    label: "戏剧"
                },
                {
                    value: 5,
                    label: "曲艺"
                },
                {
                    value: 6,
                    label: "舞蹈"
                },
                {
                    value: 7,
                    label: "杂技艺术"
                },
                {
                    value: 8,
                    label: "电影和类似摄制电影方法创作的作品"
                },
                {
                    value: 9,
                    label: "工程设计图、产品设计图"
                },
                {
                    value: 10,
                    label: "地图、示意图"
                },
                {
                    value: 11,
                    label: "其他"
                }
            ],
            // 创作性质选项
            creation_nature: [
                {
                    value: 1,
                    label: "原创"
                },
                {
                    value: 2,
                    label: "改编"
                },
                {
                    value: 3,
                    label: "翻译"
                },
                {
                    value: 4,
                    label: "汇编"
                },
                {
                    value: 5,
                    label: "注释"
                },
                {
                    value: 6,
                    label: "整理"
                },
                {
                    value: 7,
                    label: "其他"
                }
            ],

            // 发表状态选项
            publish_status: [
                {
                    value: 1,
                    label: "已发表"
                },
                {
                    value: 0,
                    label: "未发表"
                }
            ],
            owner_type: [
                {
                    value: 1,
                    label: "自然人"
                },
                {
                    value: 2,
                    label: "企业法人"
                },
                {
                    value: 3,
                    label: "事业单位法人"
                },
                {
                    value: 4,
                    label: "机关法人"
                },
                {
                    value: 5,
                    label: "社会团体法人"
                },
                {
                    value: 6,
                    label: "其他组员"
                }
            ],
            id_type: [
                {
                    value: 1,
                    label: "居民身份证"
                },
                {
                    value: 2,
                    label: "护照"
                },
                {
                    value: 3,
                    label: "企业营业执照"
                },
                {
                    value: 4,
                    label: "军官照"
                },
                {
                    value: 5,
                    label: "组织机构代码证书"
                }
            ],
            region: {
                finish: "",
                publish: "",
                owner: ""
            }
        };
    },
    computed: {
        finish_citys: function() {
            return formatData(addressData[this.degree_01.finish_region]);
        },
        publish_citys: function() {
            return formatData(addressData[this.degree_01.publish_region]);
        },
        owner_citys: function() {
            return formatData(addressData[this.addOwner.region]);
        },
		...mapState([
			'croUser',
		]),
    },
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),

        // 作者身份证上传
        authorSuccess(res, file) {
            if (res.data) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addAuthor.author_id_card = res.data;
                this.editAuthor.author_id_card = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        authorUpload(file) {},
        authorExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 著作权人身份证上传
        ownerSuccess(res, file) {
            if (res.data) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addOwner.id_pic = res.data;
                this.editOwner.id_pic = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        ownerExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        ownerUpload(file) {},

        // 说明书上传
        sowSuccess(res, file) {
            // console.log(res);
            if (res.data) {
                this.degree_01.creation_pic = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        sowUpload(file) {},
        sowExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 创作完成地点地址联动
        finish_regionChange: function(val) {
            if (this.region.finish != val && this.region.finish != "") {
                this.degree_01.finish_city = "";
            }
            this.region.finish = val; // oldVal
            var data = formatData(addressData[this.degree_01.finish_region]);
            for (var i = 0; i < data.length; i++) {
                this.$set(this.finish_citys, i, data[i]);
            }
        },
        // 首次发表地点地址联动
        publish_regionChange: function(val) {
            if (this.region.publish != val && this.region.publish != "") {
                this.degree_01.publish_city = "";
            }
            this.region.publish = val; // oldVal
            var data = formatData(addressData[this.degree_01.publish_region]);
            for (var i = 0; i < data.length; i++) {
                this.$set(this.publish_citys, i, data[i]);
            }
        },

        // 著作权人地址联动
        owner_regionChange: function(val) {
            if (this.region.owner != val && this.region.owner != "") {
                this.addOwner.city = "";
            }
            this.region.owner = val; // oldVal
            var data = formatData(addressData[this.addOwner.region]);
            for (var i = 0; i < data.length; i++) {
                this.$set(this.owner_citys, i, data[i]);
            }
        },

        // 获取作者列表
        authorlistFn: function() {
            let para = {
                user_id: this.croUser.user_id,
                copyright_number: this.copyright_number
            };

            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            authorlist(para).then(data => {
                // this.addLoading = false;
                //NProgress.done();
                let res = data.data;
                let msg = data.msg;
                // if(res){
                this.authorList = res.list;
                // }else{
                // 	this.$message({
                // 		message: msg,
                // 		type: 'error'
                // 	});
                // }
            });
        },

        // 显示添加作者界面
        handleAddAuthor: function() {
            this.addAuthorVisible = true;
            this.addAuthor = {
                author_name: "",
                author_signature: "",
                author_id_card: ""
            };
        },

        // 显示编辑作者界面
        handleEditAuthor: function(index, row) {
            this.editAuthorVisible = true;
            this.editAuthor = Object.assign({}, row);
        },

        // 添加作者
        addAuthorFn: function() {
            this.$refs.addAuthor.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {})
                        .then(() => {
                            // this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.addAuthor);
                            para.user_id = this.croUser.user_id;
                            para.copyright_number = this.copyright_number;
                            // console.log(para);
                            addAuthor(para).then(res => {
                                if (res.data) {
                                    this.addAuthorVisible = false;
									this.$message.success(res.msg);
                                    this.$refs["addAuthor"].resetFields();
                                    this.authorlistFn();
                                } else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
                            });
                        })
                        .catch(() => {});
                }
            });
        },

        // 编辑作者
        authorupFn: function() {
            this.$refs.editAuthor.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {})
                        .then(() => {
                            // this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editAuthor);
                            para.user_id = this.croUser.user_id;
                            para.copyright_number = this.copyright_number;
                            //							console.log(para);

                            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                            authorup(para).then(res => {
                                if (res.data) {
                                    this.editAuthorVisible = false;
									this.$message.success(res.msg);
                                    this.$refs["editAuthor"].resetFields();
                                    this.authorlistFn();
                                } else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
                            });
                        })
                        .catch(() => {});
                }
            });
        },

        //删除
        authordelFn: function(index, row) {
            this.$confirm("确认删除该记录吗?", "提示", {
                type: "warning"
            })
                .then(() => {
                    // this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        user_id: this.croUser.user_id,
                        author_id: row.author_id
                    };
                    authordel(para).then(res => {
                        if (res.data) {
							this.$message.success(res.msg);
                            this.authorlistFn();
                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                })
                .catch(() => {});
        },

        // 获取著作权人列表
        ownerlistFn: function() {
            let para = {
                user_id: this.croUser.user_id,
                copyright_number: this.copyright_number
            };

            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            ownerlist(para).then(data => {
                // this.addLoading = false;
                //NProgress.done();
                let res = data.data;
                let msg = data.msg;
				this.ownerList = res.list;
			
                // 跳转到登录
                if (data.tologin) {
					this.OUT_LOGIN();
					this.$router.push('/login');
					this.$message.error(res.msg);
                }
            });
        },

        // 显示添加著作权人界面
        handleAddOwner: function() {
            this.addOwnerVisible = true;
            this.addOwner = {
                owner_name: "",
                owner_type: "", //类别
                id_type: "",
                id_number: "",
                // country: '',
                region: "",
                city: "",
                owner_signature: "", //署名
                id_pic: "" //身份证路径
            };
        },

        // 显示编辑著作权人界面
        handleEditOwner: function(index, row) {
            this.editOwnerVisible = true;
            this.editOwner = Object.assign({}, row);
        },

        // 添加著作权人
        addownerFn: function() {
            this.$refs.addOwner.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {})
                        .then(() => {
                            // this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.addOwner);
                            para.user_id = this.croUser.user_id;
                            para.copyright_number = this.copyright_number;
                            // copyright_number=12346578910&author_name=%E5%BC%A0%E4%B8%89&author_signature=%E6%9D%8E%E5%9B%9B&author_id_card=abc

                            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                            addowner(para).then(res => {
                                if (res.data) {
                                    this.addOwnerVisible = false;
									this.$message.success(res.msg);
                                    this.$refs["addOwner"].resetFields();
                                    this.ownerlistFn();
                                } else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
                            });
                        })
                        .catch(() => {});
                }
            });
        },

        // 编辑作者
        ownerupFn: function() {
            this.$refs.editOwner.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {})
                        .then(() => {
                            // this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editOwner);
                            para.user_id = this.croUser.user_id;
                            para.copyright_number = this.copyright_number;
                            //							console.log(para);
                            // copyright_number=12346578910&author_name=%E5%BC%A0%E4%B8%89&author_signature=%E6%9D%8E%E5%9B%9B&author_id_card=abc

                            // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                            ownerup(para).then(res => {
                               	if (res.data) {
                                    this.editOwnerVisible = false;
									this.$message.success(res.msg);
                                    this.$refs["editOwner"].resetFields();
                                    this.ownerlistFn();
                                } else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
                            });
                        })
                        .catch(() => {});
                }
            });
        },

        //删除
        ownerdelFn: function(index, row) {
            this.$confirm("确认删除该记录吗?", "提示", {
                type: "warning"
            })
                .then(() => {
                    // this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        user_id: this.croUser.user_id,
                        owner_id: row.owner_id
                    };

                    ownerdel(para).then(res => {
                        if (res.data) {
							this.$message.success(res.msg);
                            this.ownerlistFn();
                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                })
                .catch(() => {});
        },

        // 获取已提交数据
        lookFn() {
            let para = {
                copyright_number: this.copyright_number,
                user_id: this.croUser.user_id
            };
            look(para).then(res => {
                if (res.data) {
                    this.degree_01 = res.data;
                } else if(res.tologin) {
					this.OUT_LOGIN();
					this.$router.push('/login');
				}else {
					this.$message.error(res.msg);
				}
            });
            this.authorlistFn();
            this.ownerlistFn();
        },
        // 总提交
        updateinfoFn() {
            this.$refs.degree_01.validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.degree_01);
                    para.degree = 1;
                    para.user_id = this.croUser.user_id;
                    para.copyright_number = this.copyright_number;
                    // console.log(para);

                    para.finish_date =
                        !para.finish_date || para.finish_date == ""
                            ? ""
                            : util.formatDate.format(
                                  new Date(para.finish_date),
                                  "yyyy-MM-dd"
                              );

                    para.publish_date =
                        !para.publish_date || para.publish_date == ""
                            ? ""
                            : util.formatDate.format(
                                  new Date(para.publish_date),
                                  "yyyy-MM-dd"
                              );

                    updateinfo(para).then(res => {
                        if (res.data) {
                            //   this.$router.push('/copyRightStep02');
                            this.$router.push({
                                path: "copyRightStep02",
                                query: {
                                    copyright_number: this.copyright_number
                                }
                            });
                            // this.$refs['editOwner'].resetFields();
                            // this.ownerlistFn();
                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                }
            });
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 获取流水号
        getStreamnumFn() {
            let para = { user_id: this.croUser.user_id };
            getStreamnum(para).then(res => {
                if (res.data) {
                    this.copyright_number = res.data;
                } else if(res.tologin) {
					this.OUT_LOGIN();
					this.$router.push('/login');
				}else {
					this.$message.error(res.msg);
				}
            });
        }
    },
    mounted() {
        this.copyright_number = this.$route.query.copyright_number;
        if (!this.copyright_number) {
            this.getStreamnumFn();
        } else {
            this.lookFn();
        }
    }
};
</script>
<style lang="scss" scoped>
.content-outside {
    width: 100%;
    background: #f2f2f2;
    padding: 15px 0;
}

.content {
    width: 1200px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    font-size: 14px;
}

.content h4 {
    font-size: 16px;
    // font-weight: normal;
}

.content h4 > span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 25px;
}

/* hr */
.content .hr {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #c6c6c6;
    margin-top: 20px;
    font-size: 17px;
}

.content .hr > p {
    position: relative;
    top: -17px;
    left: 0;
    width: 300px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

/* step 提交后 #37629d 填写前 #c6c6c6 */
.step_state {
    height: 90px;
    padding: 35px 0 55px 100px;
}

.step {
    float: left;
}

.step_border {
    display: inline-block;
    background: #c6c6c6;
    width: 90px;
    height: 1px;
    vertical-align: top;
    margin: 0;
    margin-top: 45px;
}

.step_info {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    box-sizing: border-box;
    padding-top: 15px;
    margin: 0 15px;
}

.step_info span {
    display: block;
    line-height: 22px;
    text-align: center;
}

.step.current .step_border {
    background: #37629d;
}

.step.current .step_info {
    border: 1px solid #37629d;
    color: #37629d;
}

.step_form_info {
    margin-top: 30px;
    background: #f2f2f2;
    padding: 0 30px 30px 30px;
}

.form_box {
    padding: 15px 15px 30px 15px;
    background: #f2f2f2;
}

.form_box .h3 {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0 25px 0;
}

.el-radio-group .el-radio {
    padding-right: 15px;
    line-height: 36px;
}

.el-radio + .el-radio {
    margin: 0;
}

.ff4949 {
    color: #ff4949;
    margin-right: 4px;
}

.form_next {
    text-align: center;
    padding: 25px 0;
}

.form_width {
    width: 1000px;
    margin-left: 80px;
}

.tablepadding {
    padding: 0 10px;
    background: #fff;
}
</style>
